<template>
	<view class="con">
		<!-- 侧边按钮 -->
		<view class="sideBar">
			<view v-if="isType == 1 || isType == 2" class="cart sideBar_item" @click="onButJump(1)">
				<image src="https://img-cdn.duobashuzi.com/xianggui/img/zhuang.png" mode="widthFix"></image>
			</view>
			<view v-if="isType == 1" class="home sideBar_item" @click="onButJump(2)">
				<image src="https://img-cdn.duobashuzi.com/xianggui/img/gyg.png" mode="widthFix"></image>
			</view>
			<view v-if="isType == 1" class="gwc sideBar_item" @click="onButJump(3)">
				<image src="https://img-cdn.duobashuzi.com/xianggui/img/zfb03.png" mode="widthFix"></image>
			</view>
		</view>
		<u-popup :show="isStroll" @close="closeStroll" closeable='true' round='10px'>
			<view class="stroll">
				<view class="strollTitle">商品橱窗</view>
				<view class="strollCont">
					<view class="strollContli">
						<view class="slitop">
							<view class="slitopleft">
								<image src="https://img-cdn.duobashuzi.com/xianggui/img/rebang.png" mode="widthFix"></image>
								<text>店铺热榜</text>
							</view>
							<view class="slitopright" @click="onjump(1)">
								<text>查看更多</text>
								<u-icon name="arrow-right" color="#969799" size="12px"></u-icon>
							</view>
						</view>
						<view class="stgood">
							<view class="stgoodli"v-for="(v,i) in rbgoodsList"  @click="onGoodinfo(v.id,v.product_name)" v-if="i < 3" >
								<view class="stgoodliImg">
									<image :src="v.preview_img" mode="widthFix"></image>
									<view class="jiangbei jiangbei1" v-if="i == 0">
										<image src="https://img-cdn.duobashuzi.com/xianggui/img/jinagbei_01.png"></image>
									</view>
									<view class="jiangbei jiangbei2" v-else-if="i == 1">
										<image src="https://img-cdn.duobashuzi.com/xianggui/img/jinagbei_02.png"></image>
									</view>
									<view class="jiangbei jiangbei3" v-else-if="i == 2">
										<image src="https://img-cdn.duobashuzi.com/xianggui/img/jinagbei_03.png"></image>
									</view>
								</view>
								<!-- <view class="stgoodlitj">
									<image src="https://img-cdn.duobashuzi.com/xianggui/img/rem_img.png" mode="widthFix"></image>
									<text>热卖商品</text>
								</view>
								<view class="stgoodlitj">
									<image src="https://img-cdn.duobashuzi.com/xianggui/img/zan-img.png" mode="widthFix"></image>
									<text>店家推荐</text>
								</view>
								<view class="renqi">
									<text>人气款</text>
								</view> -->
								<view class="stgoodPrice">￥{{v.product_shop_price}}</view>
							</view>
						</view>
					</view>
					<view class="strollContli">
						<view class="slitop">
							<view class="slitopleft">
								<image src="https://img-cdn.duobashuzi.com/xianggui/img/tuijian.png" mode="widthFix"></image>
								<text>为你推荐</text>
							</view>
							<view class="slitopright" @click="onjump(2)">
								<text>查看更多</text>
								<u-icon name="arrow-right" color="#969799" size="12px"></u-icon>
							</view>
						</view>
						<view class="stgood">
							<view class="stgoodli" v-for="(v,i) in tjgoodsList"  @click="onGoodinfo(v.id,v.product_name)" v-if="i < 3" >
								<view class="stgoodliImg">
									<image :src="v.preview_img" mode="widthFix"></image>
									
								</view>
								
								<view class="stgoodPrice">￥{{v.product_shop_price}}</view>
							</view>
						</view>
					</view>
					<view class="strollContli">
						<view class="slitop">
							<view class="slitopleft">
								<image src="https://img-cdn.duobashuzi.com/xianggui/img/zuji.png" mode="widthFix"></image>
								<text>历史足迹</text>
							</view>
							<view class="slitopright" @click="onjump(3)">
								<text>查看更多</text>
								<u-icon name="arrow-right" color="#969799" size="12px"></u-icon>
							</view>
						</view>
						<view class="stgood">
							<view class="stgoodli" v-for="(v,i) in zjgoodsList"  @click="onGoodinfo(v.id,v.product_name)" v-if="i < 3" >
								<view class="stgoodliImg">
									<image :src="v.preview_img" mode="widthFix"></image>
									
								</view>
								
								<view class="stgoodPrice">￥{{v.product_shop_price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	import{getXgjBottomRecommendGoods,lookProductHistory} from '@/api/goodsList.js'
	export default {
		name: "sideBar",
		props: {
			isType:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				isStroll:false,
				rbgoodsList:[],
				tjgoodsList:[],
				zjgoodsList:[],
				loading: false,   // 是否正在加载
			    noMoreData: false, // 是否还有更多数据
			    page: 1,          // 当前页
				pageSize: 10
				
			}
		},
		// number
		onShow() {
		
		},
		
		methods: {
			//
			//跳转到商品详情页面
			onGoodinfo(id,text){
				
			// let data = this.baseList[e];
				uni.navigateTo({
					url: '/package/info/index?id='+id+'&title='+text
				});
			},
			onjump(e){
				uni.navigateTo({
					url: '../../package/richText/richText?type='+ e
				});
			},
			//热榜和历史足迹
			getRecommendlist(e){
				
				getXgjBottomRecommendGoods({type:e},this.page).then(res=>{
					if(e == 1){
						this.tjgoodsList = res.result.data 
					}else{
						this.rbgoodsList = res.result.data 
					}
				}).catch(err=>{
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
				})
			},
			//历史足迹
			getlookProductHistory(){
				lookProductHistory({},this.page).then(res=>{
					console.log(res)
					this.zjgoodsList = res.result.data
					
				}).catch(err=>{
					console.log(err)
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
				})
			},
			//关闭弹窗
			closeStroll(){
				this.isStroll = false;
			},
			//点击按钮
			onButJump(type){
				if(type == 1){
					//分销
					uni.navigateTo({
						url: '/package/distribution/distribution'
					});
					
				}else if(type == 2){
					//逛一逛
					this.getRecommendlist(1)//推荐
					this.getRecommendlist(2)//热榜
					this.getlookProductHistory()//历史足迹
					this.isStroll = true;
				}else{
					uni.switchTab({
						url: '/pages/cart/index'
					});
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.stroll{
		width: 100%;
		background: #f7f8fa;
		.strollTitle{
			height: 30px;
			line-height: 30px;
			font-size: 16px;
			color: #323232;
			text-align: center;
			padding: 10px 0;
			
		}
		.strollCont{
			width: 100%;
			height: 70vh;
			overflow-y: scroll;
			.strollContli{
				width: 90%;
				padding: 0 2.5%;
				margin: 0 auto;
				border-radius: 10px;
				background: #fff;
				margin-bottom: 10px;
				.slitop{
					display: flex;
					padding: 10px 0;
					justify-content: space-between;
					align-items: center;
					.slitopleft{
						font-size: 16px;
						line-height: 20px;
						color: #323232;
						display: flex;
						align-items: center;
						image{
							display: block;
							width: 16px;
							height: 16px;
							padding-top: 2px;
							margin-right: 2px;
						}
					}
					.slitopright{
						line-height: 20px;
						display: flex;
						color: #969799;
						font-size: 12px;
						
					}
				}
				.stgood{
					display: flex;
					justify-content: space-around;
					.stgoodli{
						width: 30%;
						background: #fff;
						border-radius: 10px;
						overflow: hidden;
						padding: 10px 0;
						.stgoodliImg{
							display: 100%;
							width: 100%;
							height: 100px;
							position: relative;
							padding: 5px 0;
							overflow: hidden;
							image{
								display: block;
								width: 100%;
								height: 100%;
							}
							.jiangbei{
								width: 50rpx;
								height:50rpx;
								position: absolute;
								left: 10px;
								top: 0;
								image{
									display: block;
									width: 100%;
									height: 100%;
								}
							}
						}
						.stgoodlitj{
							
							width: 60px;
							display: flex;
							font-size: 12px;
							color: #ee0a24;
							border:1px solid #ee0a24;
							padding: 1px 2px;
							border-radius: 10px;
							margin: 5px 0;
							image{
								display: block;
								width: 10px;
								height: 10px;
							}
						}
						.renqi{
							text{
								border-radius: 10px;
								font-size: 12px;
								color: #ee0a24;
								background: #ffe2e6;
								padding: 1px 5px;
								margin: 5px 0;
							}
							
						}
						.stgoodPrice{
							color: #ee0a24;
							font-size: 14px;
						}
					}
					
				}
				
			}
		}
	}
	.sideBar{
		position: fixed;
		right: 5%;
		bottom: 10%;
		display: flex;
		flex-direction: column;
		z-index: 999;
		.sideBar_item{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.9);
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 2px 0 #999;
			margin-bottom: 6px;
			position: relative;
			image{
				width: 100%;
			}
			.kefu{
				width: 100%;
				height: 100%;
				background: #0000;
				border: none;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 11;
			}
			button::after{
				border: none!important;
			}
		}
	}
</style>